<?php
session_start();
?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .main{
    width: 80%;
    margin:0 auto;
            text-align: center;
        }
        .main ul{
    width: 90%;
    margin: 0 auto;
            text-align: center;
        }
        h2{
    text-align: center;
            font-size: 15px;
        }
        h2 a{
    margin-right: 15px;
            color: navy;
            text-decoration: none;
        }
        h2 a:last-child{
    margin-right: 0;
        }
        h2 a:hover{
    color: crimson;
    text-decoration: none;
        }
        .current{
    color: cyan;
}
        .formOne{
    margin-top: 40px;
            text-align: center;
        }
        .formOne input{

}
        .red{
    color: red;
}

        .green{color: green}
        .black{color: blue}
        #loading2{width: 21px;display: none}
        #loading1{width: 21px;display: none}
    </style>
</head>
<body>
<div class="main">
    <?php include_once 'nav.php'?>
</div>
<form class="formOne" action="postLogin.php" method="post" onsubmit="return check()">
    <table align="center" border="1" style="border-collapse: collapse" cellpadding="10" cellspacing="0">
        <tr>
            <td align="right">用户名: </td>
            <td align="left">
                <input name="username" onblur="checkUsername()" id="username">
                <span class="red">*</span>
                <span id="usernameMsg"></span>
                <img src="./img/对.jpg" id="loading1" class="dui">
                <img src="img/x.jpg" id="loading2" class="cuo">
            </td>
        </tr>
        <tr>
            <td align="right">密码: </td>
            <td align="left"><input type="password" name="pw"><span class="red">*</span></td>
        </tr>
        <tr>
            <td align="right">验证码</td>
            <td align="left">
                <input name="code">
                <img src="code.php" onclick="this.src='code.php?'+ new Date().getTime();" width="200px" height="70px">
                <span class="red">*</span>
            </td>
        </tr>
<!--        <tr>-->
<!--            <td align="right">确认密码: </td>-->
<!--            <td align="left"><input type="password" name="cpm"><span class="red">*</span></td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td align="right">性别 </td>-->
<!--            <td align="left">-->
<!--                <input type="radio" name="sex" value="1" checked>男-->
<!--                <input type="radio" name="sex" value="0">女-->
<!--            </td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td align="right">邮箱: </td>-->
<!--            <td align="left"><input name="email"></td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td align="right">兴趣爱好 </td>-->
<!--            <td align="left">-->
<!--                <input name="fav[]" type="checkbox" value="玩游戏">玩游戏-->
<!--                <input name="fav[]" type="checkbox" value="王者">王者-->
<!--                <input name="fav[]" type="checkbox" value="游戏">游戏-->
<!--            </td>-->
<!--        </tr>-->
        <tr>
            <td align="center"><input type="submit" value="提交"></td>
            <td align="left"><input type="reset" value="重置"></td>
        </tr>
    </table>
</form>
<script src="jquery-3.2.1.js"></script>

<script>
    function  checkUsername() {
        // let userName = document.getElementsByName('username')[0].value.trim();
        let userName = $("#username").val().trim();
        if(userName.length==0){
            $('').hide();
            $('#loading2').hide();
            return ;
        }else{
            let userNameReg = /^[a-zA-Z0-9_]{3,10}$/;
            if(!userNameReg.test(userName)){
                alert('用户名必须填写，且只能大小写字符和数字下划线组成，长度为3~10个字符');
                return false;
            }
            $.ajax({
                url:"checkUsername.php",
                type:'post',
                dataType:'json',
                data:{username:userName},
                success:function (d) {
                        if(d.code == 0){
                            $('#loading1').show();
                            $('#loading2').hide();
                        }else if(d.code==2){
                            $('#loading1').hide();
                            $('#loading2').show();
                        }
                },
                error:function () {
                    $('#loading1').hide();
                    $('#loading2').hide();
                    alert('网络错误');
                }
            })
        }


    }
    function check() {

        let userName = document.getElementsByName('username')[0].value.trim();
        console.log(userName);
        let pw = document.getElementsByName('pw')[0].value.trim();
        // let cpm = document.getElementsByName('cpm')[0].value.trim();
        // let email = document.getElementsByName('email')[0].value.trim();
        let userNameReg = /^[a-zA-Z0-9_]{3,10}$/;
        if(!userNameReg.test(userName)){
            alert('用户名必须填写，且只能大小写字符和数字下划线组成，长度为3~10个字符');
            return false;
        }
      let pwReg =/^[a-zA-Z0-9_*]{6,10}$/;
        if(!pwReg.test(pw)){
            alert('密码必须填写，且只能大小写字符和数字下划线和*组成，长度为6~10个字符');
            return false;
        // }else{
        //     if(pw != cpm){
        //         alert('密码和确认密码必须相同');
        //         return false;
        //     }
        }
        // let emailReg = /^[a-zA-Z0-9_\-]+@([a-zA-Z0-9]+\.)(com|con|arg|net)$/
        // if(email.length>0) {
        //     if (!emailReg.test(email)) {
        //         alert('邮箱格式不正确');
        //         return false;
        //     }
        // }
        // let emailReg = /^[a-zA-Z0-9_\-]+@([a-zA-Z0-9]+\.)(com|cn|net|org)$/;
        // if(email.length>0) {
        //     if (!emailReg.test(email)) {
        //         alert('邮箱格式不正确');
        //         return false;
        //     }
        // }

        //验证验证码
        let code = document.getElementsByName('code')[0].value.trim();
        let codeReg = /^[a-zA-Z0-9]{4}$/;
        if(!codeReg.test(code)){
            alert('验证码必须填写，且只能由大小写字母和数字组成');
            return false;
        }
        return true;
    }
</script>
</body>
</html>

